<template lang="pug">
  Modal(v-model="reportModal" title="课后报告" width="800")
    ul.report-list
      li(v-for="(item,index) in reportArr" :key="index")
        span {{item.name}}
        Tooltip(content="下载" placement="top")
          Icon.ml-5.handle-icon(type="md-download" @click="downloadFile(item.id, item.name)")
        Tooltip(content="删除" placement="top")
          Icon.ml-5.handle-icon(type="md-close-circle" @click="deleteFile(item.id)")
      li
        Upload.ml-20.display-inline-block(:headers="headers" :show-upload-list="false" multiple :action="uploadBaseUrl+'/Attachment/UploadExcludePDF?key='+ id + '&categoryName=' + categoryName" :on-success="reportUpSuccess")
          Button(type="info" icon="ios-cloud-upload-outline") 点击上传
</template>

<script>
import { ProductDeliveryApi } from '@/api/ProductDelivery.api.js'
import Cookies from 'js-cookie'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

export default {
  props: {
    id: String,
    reportArr: Array
  },
  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      uploadBaseUrl: baseUrl,
      categoryName: '课后反馈',
      reportModal: false
    }
  },
  methods: {
    show () {
      this.reportModal = true
    },
    reportUpSuccess () {
      this.$emit('get-report-list')
    },
    downloadFile (id,fileName) {
      console.log('1111')
      ProductDeliveryApi.downloadReport({
        id: id
      }).then(res => {
        console.log(res)
        let blob = new Blob([res.data], { type: 'application/octet-stream' })
        if ('download' in document.createElement('a')) {
          let objectUrl = URL.createObjectURL(blob)
          console.log(objectUrl)
          const link = document.createElement('a')
          link.download = fileName
          link.href = objectUrl
          link.click()
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    deleteFile (id) {
      ProductDeliveryApi.deleteReport({
        id: id
      }).then(res => {
        console.log(res)
        this.$emit('get-report-list')
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .report-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    li{
      border: 1px solid #eee;
      border-radius: 2px;
      padding: 5px 10px;
      &:last-child{
        border: none;
        padding: 0;
      }
    }
  }
  .handle-icon{
    cursor: pointer;
  }
</style>
